<template>
	<div class="search-wrap">
		<div class="search">
			<div class="search-input">
				<el-input clearable @change="search" v-model="keyword" placeholder="输入客户姓名或手机号码"></el-input>
			</div>
			<el-button :loading="load" @click="search" class="search-button">搜索</el-button>
		</div>
		<div v-if="list.length" class="search-reuslt">
			<div class="title">客户列表</div>
			<ul class="list">
				<li class="item" v-for="(item, index) in list" :key="index">
					<div class="col userName">
						{{ item.user_name }}
					</div>
					<div class="col phone">
						{{ item.phone }}
					</div>
					<div class="col sex" style="display: flex; justify-content: center">
						{{ genderMap[Number(item.gender)] }}
					</div>
					<div class="col button-wrap" style="display: flex; justify-content: flex-end">
						<el-button v-if="item.check_info.check_at" :loading="item.loading" class="col-button col-button2" @click="clickBtns({ flag: '最近检测', item })">
							编辑{{ item.check_info.check_at }}检测报告
						</el-button>
					</div>
					<div class="col button-wrap" style="display: flex; justify-content: flex-end">
						<el-button :loading="item.loading" class="col-button" @click="clickBtns({ flag: '开始检测', item })">开始检测</el-button>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
export default {
	name: 'search',
	components: {},
	data() {
		return {
			load: false,
			keyword: '',
			list: []
		};
	},
	computed: {},
	mounted() {
		// this.search();
	},
	methods: {
		search() {
			let keyword = this.keyword;
			if (!keyword) {
				this.list = [];
				return;
			}
			// // 判断是否是手机号
			// function isPhoneNumber(str) {
			// 	const phoneRegex = /^1[3-9]\d{9}$/; // 中国手机号正则表达式
			// 	return phoneRegex.test(str);
			// }

			// // 判断是否是姓名
			// function isName(str) {
			// 	const nameRegex = /^[\u4e00-\u9fa5]{2,6}$/; // 2到6个中文字符的姓名
			// 	const nameRegexEnglish = /^[A-Za-z\s]{2,20}$/; // 2到20个字母或空格的英文姓名
			// 	return nameRegex.test(str) || nameRegexEnglish.test(str);
			// }
			// let params = {};
			// if (isPhoneNumber(keyword)) {
			// 	params['phone'] = keyword;
			// }
			// if (isName(keyword)) {
			// 	params['user_name'] = keyword;
			// }
			this.load = true;
			let shop_id = localStorage.getItem('shop_id') || this.$route.query.shop_id;
			// this.$api('check/user/search', { ...params, shop_id }, 'post').then((res) => {
			this.$api('check/user/search', { name: this.keyword, shop_id }, 'post').then((res) => {
				this.load = false;
				if (res.code == 200) {
					this.list = res.data.data;
					if (this.list.length === 0) {
						// alertErr('未找到对应客户')
					}
				}
			});
		},
		clickBtns({ flag, item }) {
			if (flag == '最近检测') {
				let check_id = item.check_info.check_id;
				this.$store.state.check_id = check_id;
				localStorage.setItem('check_id', check_id);
				this.toNav(`/customerInfo?user_id=${item.user_id}&check_id=${check_id}`);
				return;
			}
			if (flag == '开始检测') {
				this.$set(item, 'loading', true);
				this.$api('check/check_id', {}, 'post').then((res) => {
					this.$set(item, 'loading', false);
					if (res.code == 200) {
						let check_id = res.data.data.check_id;
						this.$store.state.check_id = check_id;
						localStorage.setItem('check_id', check_id);
						this.toNav(`/customerInfo?user_id=${item.user_id}&check_id=${check_id}`);
					}
				});
			}
		}
	}
};
</script>

<style scoped lang="less">
.search-reuslt {
	margin-top: 16px;
	width: 970px;
	min-height: 265px;
	background: #ffffff;
	border-radius: 10px;
	opacity: 0.81;
	.title {
		height: 60px;
		display: flex;
		align-items: center;
		// border-bottom: 1px solid #ccc;
		padding: 0 30px;
		font-weight: bold;
		font-size: 24px;
		color: #333333;
		line-height: 33px;
		text-align: left;
		font-style: normal;
	}
	.list {
		padding: 0 30px;
		height: calc(100vh - 100px - 60px - 100px - 16px - 80px - 20px);
		overflow-y: auto;
		.item {
			display: flex;
			justify-content: space-between;
			padding: 25px 0;
			border-bottom: 1px solid #eee;
			.col.userName {
				width: 190px;
				// height: 30px;
				flex: none;
				.line-1();
			}
			.col.phone {
				width: 250px;
				flex: none;
			}
			.col.sex {
				width: 50px;
				flex: none;
			}
			.col {
				display: flex;
				align-items: center;
				flex: 1;
				height: 35px;
				padding-right: 10px;
				font-weight: 500;
				font-size: 24px;
				color: #333333;
				text-align: left;
				font-style: normal;
				.col-button {
					display: flex;
					align-items: center;
					justify-content: center;
					min-width: 150px;
					height: 40px;
					background: #fc5f10;
					border-radius: 10px;
					font-weight: 500;
					font-size: 18px;
					color: #ffffff;
					font-style: normal;
				}

				.col-button2 {
					background: #049669;
					// background: #1a73e8;
				}
			}
			.button-wrap {
				width: 100%;
			}
			.button-wrap + .button-wrap {
				padding-right: 0;
			}
		}
	}
}
.search {
	display: flex;
	.search-input {
		width: 800px;
		height: 80px;
		background: #ffffff;
		border-radius: 10px;
		border: 1px solid #ffffff;
		padding: 0 20px;
		/deep/.el-input {
			height: 100%;
			.el-input__inner {
				height: 100%;
				border: none;
				font-size: 18px;
			}
			.el-input__clear {
				font-size: 18px;
			}
		}
	}

	.search-button {
		width: 160px;
		height: 80px;
		margin-left: 10px;
		background: #ffffff;
		border-radius: 10px;
		font-weight: bold;
		font-size: 20px;
		color: #fc5f10;
		line-height: 28px;
		font-style: normal;
	}
}
</style>
